<template>
  <view>
    <uv-waterfall ref="waterfall" v-model="list" :left-gap="leftGap" :right-gap="rightGap" :column-gap="columnGap" @changeList="changeList">
      <!-- 第一列数据 -->
      <template v-slot:list1>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
            <view class="waterfall-item__image" @click="$to('/pages/productDetail/index?id=' + item.id)">
              <image :src="item.thumb_image" mode="widthFix" style="width: 100%; display: block"></image>
            </view>
            <view class="goodBox">
              <view class="distance" v-if="item.distance"> 附近 {{ item.distance }} </view>

              <view class="goodTitle">
                {{ item.title }}
              </view>

              <view class="userOption">
                <view class="flex-row justify-between">
                  <image class="thumbnail_8" referrerpolicy="no-referrer" style="border-radius: 100rpx" :src="item.avatar" />
                  <text class="text-group_3">{{ item.nickname }}</text>
                </view>

                <view class="align-center justify-between">
                  <image @click="doLike(item)" mode="aspectFit" class="likeInco" :src="item.is_like ? '/static/productDetail/2.png' : '/static/productDetail/2a.png'" />
                  <text class="text-goodBox" style="margin-left: 10rpx">{{ item.like }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-slot:list2>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
            <view class="waterfall-item__image" @click="$to('/pages/productDetail/index?id=' + item.id)">
              <image :src="item.thumb_image" mode="widthFix" style="width: 100%; display: block"></image>
            </view>
            <view class="goodBox">
              <view class="distance" v-if="item.distance"> 附近 {{ item.distance }} </view>

              <view class="goodTitle">
                {{ item.title }}
              </view>

              <view class="userOption">
                <view class="flex-row justify-between">
                  <image class="thumbnail_8" referrerpolicy="no-referrer" style="border-radius: 100rpx" :src="item.avatar" />
                  <text class="text-group_3">{{ item.nickname }}</text>
                </view>

                <view class="align-center justify-between">
                  <image @click="doLike(item)" mode="aspectFit" class="likeInco" :src="item.is_like ? '/static/productDetail/2.png' : '/static/productDetail/2a.png'" />
                  <text class="text-goodBox" style="margin-left: 10rpx">{{ item.like }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </uv-waterfall>
  </view>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {
      list1: [], // 瀑布流第一列数据
      list2: [], // 瀑布流第二列数据
      leftGap: 0,
      rightGap: 0,
      columnGap: 10
    }
  },
  watch: {},
  onLoad() {},
  components: {},
  created() {},
  computed: {
    imageStyle(item) {
      return item => {
        const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap
        const w = v / 2
        const rate = w / item.w
        const h = rate * item.h
        return {
          width: w + 'px',
          height: h + 'px'
        }
      }
    }
  },
  onShow() {},
  methods: {
    changeList(e) {
      console.log(e)
      this[e.name].push(e.value)
    },
    doLike(val) {
      this.$http({
        url: 'like',
        data: {
          id: val.id,
          type: val.is_like ? 2 : 1
        },
        method: 'GET'
      }).then(res => {
        val.is_like = !val.is_like
        if (val.is_like) {
          val.like++
        } else {
          val.like--
        }
      })
    },
    wapperClick(item) {
      // console.log(item)
      // this.$to('/pages/productDetail/index?id=' + item.id)
    },
    imageClick(item) {
      this.$to('/pages/productDetail/index?id=' + item.id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../pages/common/common.css';

.distance {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 9px;
  font-size: 10px;
  color: #ffffff;
  position: absolute;
  left: 3px;
  top: -25px;
  padding: 2px 5px;
}
.likeInco {
  width: 16px;
  height: 15px;
  display: block;
}

.text-goodBox {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
  position: relative;
}

.text-group_3 {
  height: 24rpx;
  overflow-wrap: break-word;
  color: rgba(40, 40, 40, 1);
  font-size: 24rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
  width: 180rpx;
  margin-left: 5rpx;
  margin-top: 6rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thumbnail_8 {
  width: 36rpx;
  height: 36rpx;
}

.userOption {
  width: 100%;
  align-self: center;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}

.waterfall {
  width: 95%;
  margin: 0 auto;
  margin-top: 15px;
  position: relative;
  padding-bottom: 0px;
}

.goodBox {
  background: #fff;
  border-radius: 0px 0px 8px 8px;
  padding: 10px;
  padding-bottom: 20rpx;
  position: relative;
}
.image-wrapper_1 {
  display: block;
  width: 100%;
}
.goodTitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 14px;
  color: #161616;
}

@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
.waterfall-item {
  overflow: hidden;
  margin-top: 10px;
  border-radius: 6px;
}
.waterfall-item__ft {
  padding: 20rpx;
  background: #fff;
  &__title {
    margin-bottom: 10rpx;
    line-height: 48rpx;
    font-weight: 700;
    .value {
      font-size: 32rpx;
      color: #303133;
    }
  }
  &__desc .value {
    font-size: 28rpx;
    color: #606266;
  }
  &__btn {
    padding: 10px 0;
  }
}
</style>
